import './style.css'
import * as THREE from 'three'
import {
  OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'
// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
import {
  CSS2DRenderer,
  CSS2DObject
} from 'three/addons/renderers/CSS2DRenderer.js';

//场景
const scene = new THREE.Scene()
//相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 50, 100);

// 灯光
// 环境光
const light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
// 上光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(0, 100, 20)
scene.add(directionalLight);
const directionalLight3 = directionalLight.clone()
directionalLight3.position.set(0, 100, -20)
// 下光源
const directionalLight2 = directionalLight.clone()
directionalLight2.position.set(0, -100, 0)
// scene.add(directionalLight2)
// 法线
const axesHelper = new THREE.AxesHelper(50);
scene.add(axesHelper);
// 数据
const color = ['#f00', '#58D8A7', '#E7C050']
const chartData = [{
    label: '星期一',
    value: 40
  },
  {
    label: '星期二',
    value: 80
  },
  {
    label: '星期三',
    value: 20
  },
]
const group = new THREE.Group();
const group2 = new THREE.Group();

const max = chartData.reduce((pre, item) => {
  return pre + item.value
}, 0)
let startdeg = 0
//图形中的间隔
let spaceDistance = 0
chartData.forEach((item, index) => {
  huxing({
    item,
    max,
    color: color[index],
    index: index + 1
  })
})
const geometry = new THREE.CylinderGeometry(25, 25, 2, 50);
const material = new THREE.MeshStandardMaterial({
  color: '#58D8A7',
  transparent: true,
  opacity: 0.35,
});
const cylinder = new THREE.Mesh(geometry, material);
cylinder.position.y = -1.1
scene.add(cylinder);
const geometry2 = new THREE.TorusGeometry(25, 0.1, 16, 100);
const material2 = new THREE.MeshBasicMaterial({
  color: '#58D8A7'
});
const torus = new THREE.Mesh(geometry2, material2);
torus.rotation.x = -Math.PI / 2
scene.add(torus)
// 绘制环形图
function huxing(obj = {}) {
  //初始角度
  let start = startdeg
  // 结束角度=初始角度+自己占比的角度
  let end = startdeg + 2 * Math.PI * (obj.item.value / obj.max)

  const heartShape = new THREE.Shape();
  heartShape.absarc(0, 0, 20, start + spaceDistance, end - spaceDistance)
  heartShape.absarc(0, 0, 10, end - spaceDistance, start + spaceDistance, true)
  startdeg = end
  const extrudeSettings = {
    depth: 40 * obj.item.value / obj.max, //图像高度
    bevelEnabled: false, //是否采用斜角
    bevelThickness: 0, //斜角的厚度
    bevelSegments: 1, //斜角分层
    steps: 2, //高度分层，分出很多三角组成
    bevelSize: 0, //斜角与轮廓之间的距离
  };

  const geometry = new THREE.ExtrudeGeometry(heartShape, extrudeSettings);
  const mesh = new THREE.Mesh(geometry, new THREE.MeshStandardMaterial({
    color: obj.color,
    transparent: true,
    opacity: 0.8,
    side: THREE.DoubleSide,
  }));
  mesh.name = obj.item.label
  group.add(mesh)
  huanxingLable(
    ((obj.item.value / obj.max) * 100).toFixed(2) + '%', {
      x: Math.cos(end - (end - start) / 2) * 15,
      y: 40 * obj.item.value / obj.max,
      z: -Math.sin(end - (end - start) / 2) * 15
    }
  )
}
group.rotation.x = -Math.PI / 2
scene.add(group)

/**
 * 绘制label
 * @param {String} label 显示内容
 * @param {x:number: y:number z:number} position label放的位置
 */
function huanxingLable(label, position = {
  x: 0,
  y: 0,
  c: 0
}) {
  const labelDiv = document.createElement('div');
  labelDiv.innerHTML = `<div style='color: #fff'>${label}</div>`

  const earthLabel = new CSS2DObject(labelDiv);
  earthLabel.position.set(position.x, position.y, position.z)
  // earthLabel.center.set(0, 0, 0);
  console.log(earthLabel,'earthLabel');
  scene.add(earthLabel);
}
// 鼠标事件
const raycaster = new THREE.Raycaster()
const pointer = new THREE.Vector2();

function onPointerMove(event) {
  // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
  pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
  pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(pointer, camera);
  const intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length > 0 && intersects[0].object.name) {
    scene.traverse(function (obj) {
      // obj.isMesh：if判断模型对象obj是不是网格模型'Mesh'
      if (obj.name && obj.name != intersects[0].object.name) { //判断条件也可以是obj.type === 'Mesh'
        obj.material.opacity = 0.7
      }
    });
    intersects[0].object.material.opacity = 1
  } else {
    scene.traverse(function (obj) {
      // obj.isMesh：if判断模型对象obj是不是网格模型'Mesh'
      if (obj.name) { //判断条件也可以是obj.type === 'Mesh'
        obj.material.opacity = 0.7
      }
    });
  }
}
// window.addEventListener('pointermove', onPointerMove);


// 渲染
const renderer = new THREE.WebGLRenderer()
document.querySelector('#app').appendChild(renderer.domElement)
renderer.setSize(window.innerWidth, window.innerHeight)
// css2d渲染
let labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
document.querySelector('#app').appendChild(labelRenderer.domElement);

const controls = new OrbitControls(camera, labelRenderer.domElement);

function render() {
  renderer.render(scene, camera)
  labelRenderer.render(scene, camera);
  requestAnimationFrame(render)
}

render()